=
<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { ref, computed, onMounted, watch } from "vue";
//导航栏收缩
const store = useCounterStore();
//导航栏数据
const menuData = ref();
const menuTree = ref();
async function loadMenu() {
  menuData.value = JSON.parse(localStorage.getItem("menu") || "");
  menuTree.value = handleTree(menuData.value, "id", "parentId", "children");
}

import MenuCommon from "@/components/MenuCommon.vue";
import { handleTree } from "@/utils/ruoyi";
import { transformRoutes } from "@/utils/routeUtils";
import router from "@/router";
loadMenu();
</script>

<template>
  <el-menu
    router
    :collapse="store.isCollapse"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    text-color="#fff"
    unique-opened
  >
    <h3>{{ store.isCollapse ? "后台" : "花购管理系统" }}</h3>
    <MenuCommon v-for="item in menuTree" :key="item.path" :item="item" />
  </el-menu>
</template>
<style scoped lang="less">
.el-menu {
  height: 100vh;
  min-height: 500px;

  h3 {
    color: aliceblue;
    text-align: center;
    padding: 10px;
  }
}
</style>
